<template>
  <div id="aCoursesList" class="bg-fa of">
    <section class="container">
      <section class="path-wrap txtOf hLh30">
        <a href="#" title class="c-999 fsize14">首页</a>
        \
        <a href="#" title class="c-999 fsize14">产品列表</a>
        \
        <span class="c-333 fsize14">产品详情</span>
      </section>
      <div>
        <article class="c-v-pic-wrap" style="height: 357px">
          <section class="p-h-video-box" id="videoPlay">
            <img
              height="357px"
              width="100%"
              :src="product.img"
              :alt="product.name"
              class="dis c-v-pic"
            />
          </section>
        </article>
        <aside class="c-attr-wrap">
          <section class="ml20 mr15">
            <h2 class="hLh30 txtOf mt15">
              <span class="c-fff fsize24">{{ product.name }}</span>
            </h2>
            <section class="c-attr-jg">
              <span class="c-fff">价格：</span>
              <b class="c-yellow" style="font-size: 24px"
                >￥{{ product.price }}</b
              >
            </section>
            <section class="c-attr-mt c-attr-undis">
              <span class="c-fff fsize14"
                >发布方：三湘银行&nbsp;&nbsp;&nbsp;</span
              >
            </section>
            <section class="c-attr-mt of">
              <span class="ml10 vam">
                <em class="icon18 scIcon"></em>
                <a class="c-fff vam" title="收藏" href="#">收藏</a>
              </span>
            </section>
            <section class="c-attr-mt">
              <a
                href="#"
                title="立即购买"
                @click="getOrderId(product.id)"
                class="comm-btn c-btn-3"
                >立即购买</a
              >
            </section>
          </section>
        </aside>
        <aside class="thr-attr-box">
          <section>
            <ol class="thr-attr-ol clearfix">
              <br />
              <li>
                <p>&nbsp;</p>
                <aside>
                  <span class="c-fff f-fM" style="font-size: 18px"
                    >申请人数</span
                  >
                  <br />
                  <h6 class="c-fff f-fM mt10">{{ product.sale }}</h6>
                </aside>
              </li>
              <br /><br />
              <li>
                <p>&nbsp;</p>
                <aside>
                  <span class="c-fff f-fM" style="font-size: 18px"
                    >库存数量</span
                  >
                  <br />
                  <h6 class="c-fff f-fM mt10">{{ product.count }}</h6>
                </aside>
              </li>
              <br /><br />
              <li>
                <p>&nbsp;</p>
                <aside>
                  <span class="c-fff f-fM" style="font-size: 18px"
                    >产品利率</span
                  >
                  <br />
                  <h6 class="c-fff f-fM mt10">{{ product.interest }}</h6>
                </aside>
              </li>
            </ol>
          </section>
        </aside>
        <div class="clear"></div>
      </div>
      <div class="mt20 c-infor-box">
        <article class="fl col-7">
          <section class="mr30">
            <div class="i-box">
              <div>
                <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
                  <a name="c-i" class="current" title="产品详情">产品详情</a>
                </section>
              </div>
              <article class="ml10 mr10 pt20">
                <div>
                  <h6 class="c-i-content c-infor-title">
                    <span>产品描述</span>
                  </h6>
                  <div class="course-txt-body-wrap">
                    <section class="course-txt-body">
                      <p><b>产品利率：</b>{{ product.interest }}%</p>
                      <p v-if="product.method > 0">
                        <b>产品存款方式(定期)：</b>{{ product.method }}月
                      </p>
                      <p v-if="product.method == 0">
                        <b>产品存款方式(活期)：</b>活期存款
                      </p>
                      <p v-if="product.method > 0">
                        <b>产品预计收入：</b
                        ><span style="text-decoration：underline;color:red;"
                          >{{
                            (((product.price * product.interest) / 100) *
                              product.method) /
                            12
                          }}元</span
                        >
                      </p>
                      <br />
                      <p><b>产品介绍</b></p>
                      <p>利息计算公式：本金×利率×时间</p>
                      <p>{{ product.pDescribe }}</p>
                    </section>
                  </div>
                  <br />
                  <br />
                  <h6 class="c-i-content c-infor-title">
                    <span>购买说明</span>
                  </h6>
                  <div class="course-txt-body-wrap">
                    <section class="course-txt-body">
                      <p><b>申请条件</b></p>
                      <p>&nbsp;&nbsp;&nbsp;每人限申请一份。</p>
                      <p>&nbsp;&nbsp;&nbsp;年龄必须满足18周岁以上。</p>
                      <p>
                        &nbsp;&nbsp;&nbsp;无近3年逾期2次以上（金额小于1000元，3天内还清的除外）。
                      </p>
                      <p>&nbsp;&nbsp;&nbsp;状态为“无业/失业”不可申请。</p>
                      <p>
                        &nbsp;&nbsp;&nbsp;客户没有列入当前严重违法失信被执行人名单。
                      </p>
                      <br />
                      <p><b>申请流程</b></p>
                      <p>
                        &nbsp;&nbsp;&nbsp;客户递交基本信息资料，包括工作单位和联系电话。存款银行或公司核查客户的信用信息，包括客户的信用级别是否有违法记录，针对个体户和中小企业，还需调查其企业经营状况。
                      </p>
                      <p>
                        &nbsp;&nbsp;&nbsp;存款单位工作人员与客户签约，并在最短时间内实现存款。
                      </p>
                      <p>银行存款需要的条件:</p>
                      <p>
                        &nbsp;&nbsp;&nbsp;年满18年周岁的具有完全民事行为能力、城镇居民常住户口或合法有
                        效的居民身份证明，银行存款要求存款人年龄一般在18-60岁之间。
                      </p>
                      <p>&nbsp;&nbsp;&nbsp;有良好的征信。</p>
                    </section>
                  </div>
                </div>
              </article>
            </div>
          </section>
        </article>
        <aside class="fl col-3">
          <div class="i-box">
            <div>
              <section class="c-infor-tabTitle c-tab-title">
                <a title href="javascript:void(0)">所属银行</a>
              </section>
              <section class="stud-act-list">
                <ul style="height: auto">
                  <li>
                    <div class="u-face">
                      <a href="#">
                        <img
                          src="https://www.csxbank.com/Upload/Template/yizhu/SiteConfigPhoto/Original/202008/72edc4bb-a942-4742-8972-8ea6fd989d22.png"
                          width="50"
                          height="50"
                          alt
                        />
                      </a>
                    </div>
                    <section class="hLh30 txtOf">
                      <a
                        class="c-333 fsize16 fl"
                        href="https://baike.baidu.com/item/%E4%B8%89%E6%B9%98%E9%93%B6%E8%A1%8C/16293888?fr=aladdin"
                        >三湘银行</a
                      >
                    </section>
                    <section class="hLh20 txtOf">
                      <span class="c-999">湖南省和中部地区首家民营银行</span>
                    </section>
                  </li>
                </ul>
              </section>
            </div>
          </div>
        </aside>
        <div class="clear"></div>
      </div>
    </section>
  </div>
</template>

<script>
import ProductApi from "@/api/product.js";
import cookie from "js-cookie";
export default {
  asyncData({ params }) {
    return ProductApi.getProductById(params.id).then((response) => {
      console.log(response);
      return {
        product: response.data.data.data,
      };
    });
  },
  methods: {
    getOrderId(productId) {
      var jsonStr = cookie.get("token");
      if (jsonStr == null || jsonStr == "") {
        this.is_login();
        return;
      }

      ProductApi.getOrderId(productId).then((response) => {
        if (response.data.code == 200) {
          this.goToPay(response.data.data.data);
        } else {
          this.$message({
            message: response.data.message,
            type: "warning",
          });
        }
      });
    },
     goToPay(orderId) {
      const h = this.$createElement;
      this.$msgbox({
        title: "提示",
        message: h("p", null, [
          h("span", null, "购买成功,您的订单号为: "),
          h("i", { style: "color: teal" }, orderId),
          h("span", null, ",是否前往支付金额？"),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 1000);
          } else {
            done();
          }
        },
      }).then((action) => {
        this.$router.push({
          path: "/productOrder",
          query: { orderId: orderId, productId: this.product.id },
        });
      });
    },
    is_login() {
      this.logout();
              this.logout();
              this.$notify.error({
          title: '错误',
          message: '登录身份已过期，请重新登录'
        });
    },
    logout() {
      cookie.set("userInfo", "");
      cookie.set("token", "");
    },
  },
};
</script>